<!-- 详情 -->
<template>
  <div class="drawer-layout">
    <el-drawer :title="title" :visible.sync="drawer" @close="closeCurrentDrawer" size="60%" :wrapperClosable="false">
      <div class="layout" style="position: relative" v-loading="addLoding">
        <div class="product-info">
          <div class="info-lt">
            <div class="info-image">
              <el-image :src="goodsdetail.main_image" style="width: 70px;height: 70px;border-radius: 5px;" />
            </div>
            <div class="info-text">
              <div class="info-name fontWeight600">商品名称：
                  <el-tooltip placement="top-start" :content="goodsdetail.goods_name">
                    <span class="one_line_hidden">
                      {{ goodsdetail.goods_name ? goodsdetail.goods_name : "-" }}
                    </span>
                  </el-tooltip>
                </div>
              <div v-if="addtype == 2">商品成本：<span class="info-cost fontWeight600"
                  v-if="goodsdetail.goods_product">{{goodsdetail.goods_product[0].cost_price}}</span></div>
                  <div v-else>商品成本：<span class="info-cost fontWeight600"
                      v-if="goodsdetail">{{goodsdetail.cost_price}}</span></div>
            </div>
          </div>
          <div class="info-rt info-text">
            <div v-if="addtype == 2">规格名称：<span class="info-rule fontWeight600"
                v-if="goodsdetail.goods_product">{{goodsdetail.goods_product[0].sku_name}}</span></div>
                <div v-else>规格名称：<span class="info-rule fontWeight600"
                    v-if="goodsdetail.sku">{{goodsdetail.sku.sku_name}}</span></div>
            <div>商品编码：<span class="info-code fontWeight600">{{goodsdetail.product_code}}</span></div>
          </div>
        </div>

        <el-tabs v-model="activeName">
          <el-tab-pane label="商品规格" name="first">
            <el-form style="margin-top: 5px;" :rules="formRules" ref="form" label-position="left" :inline="true"
              :model="form" size="small">
              <el-row :gutter="10" class="mgbottom80">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item required label="选品状态">
                    <el-radio-group v-model="status">
                      <el-radio :label="1">启用</el-radio>
                      <el-radio :label="2">禁用</el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item required label="平台分类" prop="gc_id">
                    <el-cascader v-model="gc_id" :options="typeDataList" :props="{
                                            expandTrigger: 'hover',
                                            checkStrictly: true,
                                            value: 'id',
                                            label: 'name',
                                        }" @change="handleChange" placeholder="请选择平台分类"></el-cascader>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="选品库存" prop="inventory">
                    <el-input type="number" min="0" v-model="form.inventory" placeholder="请设置选品的库存"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="选品提货券" prop="voucher_price">
                    <el-input type="number" min="0" v-model="form.voucher_price" placeholder="请设置选品所需的提货券"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="参考价格" prop="retail_price">
                    <el-input type="number" min="0" v-model="form.retail_price" placeholder="划线价格用于对标"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="button-box">
              <el-button @click="closeCurrentDrawer" class="next-button">取消</el-button>
              <el-button type="primary" @click="activeName = 'second'" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>

            </div>
          </el-tab-pane>
          <el-tab-pane label="针对用户规则" name="second">
            <el-alert style="margin-bottom: 20px;background-color: #F0F8FF;" :closable="false">
              <div style="display: flex;">
                <div style="color:#000000;line-height: 20px;">说明：</div>
                <div style=" color:#9A9A9A;line-height: 20px;">当前配置是针对于用户配置的商品展示规则，只有命中以下配置的用户才能看到此商品!
                  <br />应用场景：商户售卖的奶粉，只让25岁~28岁的女性用户看到。
                </div>
              </div>
            </el-alert>
            <el-form style="margin-top: 5px;" :rules="for_user_infoRules" ref="forms" label-position="left"
              :inline="true" :model="forms" size="small">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="用户分组" prop="related_user_groupame">
                    <el-select clearable multiple v-model="related_user_group" placeholder="请选择分组">
                      <el-option v-for="item in userGroupList" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="用户标签" prop="related_user_tag">
                    <el-select v-model="related_user_tag" multiple placeholder="请选择用户标签">
                      <el-option-group v-for="group in labelList" :key="group.label" :label="group.category_name">
                        <el-option v-for="item in group.child" :key="item.id" :label="item.tag_name" :value="item.id" />
                      </el-option-group>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                  <el-form-item label="用户区域" prop="area_id" class="form-box-item">
                    <el-cascader filterable v-model="cascaderRegList"  @change="regionChangeWay" style="width: 100%" :options="regionList" collapse-tags
                      :props="{
                                             expandTrigger: 'hover',
                                             multiple: true,
                                             value: 'id',
                                             label: 'name',
                                             children: 'children',
                                             checkStrictly: false,
                                             emitPath: true,
                                            }" clearable />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                  <el-form-item label="指定用户" prop="invitation_relationship" class="form-box-item">
                    <el-select v-model="invitation_relationship" style="width: 100%" filterable multiple remote
                      clearable reserve-keyword placeholder="请输入手机号(查找用户)" :remote-method="remoteUserMethodWay"
                      :loading="selectLoading">
                      <el-option v-for="item in userList" :key="item.id"
                        :label="item.nickname + '(' + item.mobile + ')'" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="blockquote-box">营销配置</div>
              <el-row :gutter="10">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="是否优选推荐" prop="is_recommendation">
                    <el-radio v-model="forms.is_recommendation" :label="1" size="mini">是</el-radio>
                    <el-radio v-model="forms.is_recommendation" :label="0" size="mini">否</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="是否限购" prop="is_restricted">
                    <el-radio v-model="forms.is_restricted" :label="1" size="mini">是</el-radio>
                    <el-radio v-model="forms.is_restricted" :label="0" size="mini">否</el-radio>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10" v-if="forms.is_restricted == 1">
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="每日限购" prop="daily_purchase_limit">
                    <el-input v-model="forms.daily_purchase_limit" onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入限购数量" clearable />
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
                  <el-form-item label="总限购" prop="total_purchase_limit">
                    <el-input type="number" v-model="forms.total_purchase_limit" onkeyup="value=value.replace(/\D/g,'')"
                      placeholder="请输入限购数量" clearable />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row :gutter="10" class="mgbottom80">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="销售倍数" prop="sales_multiplier">
                    <el-input style="width:300px;" type="number" v-model="forms.sales_multiplier"
                      onkeyup="value=value.replace(/\D/g,'')" placeholder="例：1-5，销量会乘以1-5随机数" clearable />
                  </el-form-item>
                </el-col>

              </el-row>
            </el-form>
            <div class="button-box">
              <el-button @click="closeCurrentDrawer" class="next-button">取消</el-button>
              <el-button type="primary" @click="activeName = 'third'" class="next-button">下一步 <i
                  class="el-icon-caret-right el-icon--right"></i></el-button>

            </div>
          </el-tab-pane>
          <el-tab-pane label="针对商户规则" name="third">
            <el-alert style="margin-bottom: 20px;background-color: #F0F8FF;" :closable="false">
              <div style="display: flex;">
                <div style="color:#000000;line-height: 20px;">说明：</div>
                <div style=" color:#9A9A9A;line-height: 20px;">当前配置是针对于商户配置的选品展示规则，只有命中以下配置的商户才能看到此商品!
                  <br />应用场景：指定A商户可见【奶粉】商品。

                </div>
              </div>
            </el-alert>
            <el-form style="margin-top: 5px;" :rules="for_mer_infoRules" ref="for_mer_infoForm" label-position="left"
              :inline="true" :model="for_mer_infoForm" size="small">
              <el-row :gutter="10">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="textareabox">
                  <el-form-item label="指定商户" prop="sales_multiplier">
                    <el-select v-model="for_mer_infoForm.selection_limit" class="form-box-item" filterable multiple
                      remote clearable reserve-keyword placeholder="请输入商户手机号(查找商户)" :remote-method="remoteMethodWay"
                      :loading="selectLoading">
                      <el-option v-for="item in MerchantList" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <div class="blockquote-box">营销配置</div>
              <el-row :gutter="10" class="mgbottom80">
                <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                  <el-form-item label="改价限制类型" prop="change_price_limittype">
                    <el-radio v-for="(item, index) in [
                                            { tag_value: 1, tag_name: '不限制' },
                                            { tag_value: 2, tag_name: '不可改价' },
                                            { tag_value: 3, tag_name: '需在规定范围内改价' },
                                            { tag_value: 4, tag_name: '只允许增加建议零售价' },
                                            { tag_value: 5, tag_name: '只允许减少建议零售价' },
                                        ]" :key="index" v-model="for_mer_infoForm.change_price_limit.type"
                      :label="item.tag_value" size="mini">{{ item.tag_name }}</el-radio>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"
                  v-if="for_mer_infoForm.change_price_limit.type == 3 || for_mer_infoForm.change_price_limit.type == 5">
                  <el-form-item label="减少比例" prop="decrement">
                    <el-input clearable type="number" min="0" maxlength="11" show-word-limit v-model.trim="decrement"
                      placeholder="请输入可减少比例"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12"
                  v-if="for_mer_infoForm.change_price_limit.type == 3 || for_mer_infoForm.change_price_limit.type == 4">
                  <el-form-item label="可增加比例" prop="increment">
                    <el-input clearable type="number" min="0" maxlength="11" show-word-limit v-model.trim="increment"
                      placeholder="请输入可增加比例"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
            <div class="button-box">
              <el-button @click="closeCurrentDrawer" class="next-button">取消</el-button>
              <el-button type="primary" @click="nextStep" :loading="addPutLoading" class="next-button"  style="width: 80px;">保存</el-button>

            </div>
          </el-tab-pane>
        </el-tabs>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
  import {
    goodslist,
    supplierLists,
    getGoodsProductList,
    GoodsCateList,
    getSupplierGoodsInfo,
  } from "@/api/supplier/index";
  //平台分类列表接口
  import {
    getCategoryList
  } from "@/api/commodity/index";
  //用户分组列表接口，用户标签列表接口，区域列表接口，用户列表接口
  import {
    getgroupList,
    getTagCategoryAll,
    getRegionList,
    getUserList,
    getRegionShengShi
  } from "@/api/user/index";
  //商户列表接口
  import {
    getMerchantList,
    selectionadd,
    addselection,
    editselection,
    detailSelection,
  } from "@/api/merchant/index";
  export default {
    name: "detail",
    props: [
      "title",
      "goodsdetail",
      "goodsdetailx"
    ],
    data() {
      return {
        addPutLoading:false,
        addLoding: false,
        //drawer默认打开
        drawer: true,
        activeName: "first",
        status: 1,
        form: {
          take_delivery_price: 0,
          id: '',
          gc_id: '',
          inventory: '',
          voucher_price: '',
          retail_price: '',
        },
        gc_id: [],
        formRules: {
          inventory: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请填写库存数量"));
              } else {
                let req = /^[0-9]+$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("必须是整数"));
                }
                callback();
              }
            },
            trigger: "change",
          }, ],
          retail_price: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value == "") {
                callback(new Error("请填写参考价格"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
          voucher_price: [{
            required: true,
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请填写提货券价格"));
              } else {
                let req = /^\d+(\.\d{1,2})?$/;
                if (req.test(value)) {
                  callback();
                } else {
                  callback(new Error("最多只能保留两位小数"));
                }
              }
            },
            trigger: "change",
          }, ],
          gc_id: [{
            required: true,
            validator: (rule, value, callback) => {
              if (this.gc_id.length == 0) {
                callback(new Error("请选择平台分类"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
        },
        //针对用户规则
        forms: {
          pay_type: 1, //支付方式
          related_user_group: '', //标签
          related_user_tag: '', //分组
          sales_multiplier: '', //销售倍数取件
          invitation_relationship: [], //绑定一用户关系
          area_id: "", //城市
          is_recommendation: 0,
          is_restricted: 0,
          daily_purchase_limit: '', //限购
          total_purchase_limit: '',
        },
        related_user_tag: [], //标签
        related_user_group: [], //分组
        invitation_relationship: [], //绑定一用户关系
        //针对用户规则校验
        for_user_infoRules: {
          sales_multiplier: [{
            required: true,
            validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error("请输入销售倍数区间"));
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          is_recommendation: [{
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          }, ],
          is_restricted: [{
            required: true,
            validator: (rule, value, callback) => {
              callback();
            },
            trigger: "change",
          }, ],
          daily_purchase_limit: [{
            required: false,
            validator: (rule, value, callback) => {
              if (this.forms.is_restricted == 1) {
                if (value <= 0) {
                  callback(new Error("每日限购数量不能为空"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
          total_purchase_limit: [{
            required: false,
            validator: (rule, value, callback) => {
              if (this.forms.is_restricted == 1) {
                if (value <= 0) {
                  callback(new Error("用户总限购数量不能为空"));
                } else {
                  callback();
                }
              } else {
                callback();
              }
            },
            trigger: "change",
          }, ],
        },


        for_mer_infoForm: {
          pay_type: 3,
          selection_limit: [],
          change_price_limit: {
            type: 1,
            values: {
              increment: "",
              decrement: "",
            },
          }
        },
        for_mer_infoRules: {
          increment: [{
            required: true,
            validator: (rule, value, callback) => {
              if (
                this.for_mer_infoForm.change_price_limit.type !== 3 &&
                this.for_mer_infoForm.change_price_limit.type !== 4
              ) {
                return callback();
              }
              if (this.increment == "") {
                callback(new Error("请填写可增加比例"));
              } else {
                let req = /^[0-9]+$/;
                if (req.test(this.increment)) {
                  callback();
                } else {
                  callback(new Error("必须是整数"));
                }
              }
            },
            trigger: "change",
          }, ],
          decrement: [{
            required: true,
            validator: (rule, value, callback) => {
              if (
                this.for_mer_infoForm.change_price_limit.type !== 3 &&
                this.for_mer_infoForm.change_price_limit.type !== 5
              ) {
                return callback();
              }
              if (this.decrement == "") {
                callback(new Error("请填写可减少比例"));
              } else {
                let req = /^[0-9]+$/;
                if (req.test(this.decrement)) {
                  callback();
                } else {
                  callback(new Error("必须是整数"));
                }
              }
            },
            trigger: "change",
          }, ],
        },
        //平台分类列表
        typeDataList: [],
        addtype:2,
        //用户分组列表
        userGroupList: {},
        //用户标签列表
        labelList: [],
        //区域列表
        regionList: [],
        //用户区域
        cascaderRegList: [],
        //下拉框搜索加载
        selectLoading: false,
        //用户列表
        userList: [],
        //商户列表
        MerchantList: [],
        increment: "",
        decrement: "",
        supplier_id:'',

      };
    },
    watch: {
      goodsdetailx: {
          handler(val, oval) {
            console.log(val,"999999999")
            this.display_form(val)
          },
          deep: true,
        },
    },
    mounted() {

      //获取平台分类列表
      getCategoryList().then((res) => {
        this.typeDataList = res.data;
      });
      //获取用户分组列表
      getgroupList().then((res) => {
        this.userGroupList = res.data.list;
      });
      //获取用户标签列表
      getTagCategoryAll().then((res) => {
        this.labelList = res.data;
      });
      //获取区域列表
        getRegionShengShi({ level: 2 }).then((res) => {
          this.regionList = res.data;
        });


      //获取用户列表
      getUserList({
        page: 1,
        count: 10
      }).then((res) => {
        this.userList = res.data.list;
      });
      //获取商户列表
      getMerchantList({
        page: 1,
        count: 20
      }).then((res) => {
        this.MerchantList = res.data.list;
      });

    },
    methods: {
      // 选择区域调用
      regionChangeWay(val) {
        console.log(val)
      },
      display_form(val){
        this.addtype = 1
        this.addLoding = true
        this.status = val.status;
        this.main_image = val.main_image
        this.supplier_id = val.id;
        this.form.id = val.sku.id;
        this.form.inventory = val.sku.inventory;
        this.form.voucher_price = Number(val.sku.voucher_price);
        this.form.gc_id = val.sku.gc_id;
        this.gc_id = [];
        var arr = val.sku.gc_id.split(",");
        arr.forEach((item) => {
          this.gc_id.push(Number(item));
        });
        console.log(this.gc_id)
        this.form.retail_price =
          val.sku.suggestion_price.retail_price;
        // this.forms.pay_type = val.for_user_info.pay_type;
        this.forms.sales_multiplier =
          val.for_user_info.sales_multiplier;
        this.forms.is_restricted =
          val.for_user_info.is_restricted;
        this.forms.daily_purchase_limit =
          val.for_user_info.daily_purchase_limit;
        this.forms.total_purchase_limit =
          val.for_user_info.total_purchase_limit;
        this.forms.is_recommendation =
          val.for_user_info.is_recommendation;
        if(val.for_user_info.area_id){
          this.cascaderRegList = JSON.parse(val.for_user_info.area_id);
        }

        if(val.for_user_info.related_user_tag){
          var arr = val.for_user_info.related_user_tag.split(",");
          this.related_user_tag = [];
          arr.forEach((item) => {
            this.related_user_tag.push(Number(item));
          });
        }
        if(val.for_user_info.related_user_group){
          var arr1 = val.for_user_info.related_user_group.split(",");
          this.related_user_group = [];
          arr1.forEach((item) => {
            this.related_user_group.push(Number(item));
          });
        }

        // this.for_mer_infoForm.pay_type = val.for_mer_info.pay_type;
        this.for_mer_infoForm.change_price_limit.type =
         val.for_mer_info.change_price_limit.type;
        if (val.for_mer_info.change_price_limit.type == 3) {
          this.increment =
            val.for_mer_info.change_price_limit.values.increment;
          this.decrement =
            val.for_mer_info.change_price_limit.values.decrement;
        } else {
          this.for_mer_infoForm.change_price_limit.values =
            val.for_mer_info.change_price_limit.values;
        }
        if(val.for_mer_info.invitation_relationship_text){
          this.userList = val.for_user_info.invitation_relationship_text;
          this.userList.forEach((item) => {
            this.invitation_relationship.push(item.id);
          });
        }
        this.MerchantList = val.for_mer_info.selection_limit_text;
        this.for_mer_infoForm.selection_limit = [];
        if(val.for_mer_info.selection_limit_text){
          val.for_mer_info.selection_limit_text.forEach((item) => {
          this.for_mer_infoForm.selection_limit.push(Number(item.id));
        });
        }

        this.addLoding = false;
      },
      // 关闭当前抽屉
      closeCurrentDrawer() {
        console.log("999")
        this.$parent.closeDrawer();
        this.$parent.closeDrawers();
      },
      editorclick(e) {
        this.form.demand = e;
      },
      //指定用户搜索
      remoteUserMethodWay(query) {
        this.selectLoading = true;
        getUserList({
          search_type: 3,
          search_name: query,
          page: 1,
          count: 10,
        }).then((res) => {
          this.selectLoading = false;
          this.userList = res.data.list;
        });
      },
      // 指定商户搜索
      remoteMethodWay(query) {
        if (query !== "") {
          this.selectLoading = true;
          getMerchantList({
            page: 1,
            count: 20,
            user_cellphone: query
          }).then(
            (res) => {
              this.selectLoading = false;
              this.MerchantList = res.data.list;
            }
          );
        }
      },
      //切换分类
      handleChange(vla) {
        this.form.gc_id = vla.toString();
      },
      //保存
      nextStep() {
        var bool = true;
        this.$refs.form.validate((valid, err) => {
          if (valid) {
            return true;
          } else {
            this.activeName = "first";
            this.$messages.error('请补全商品规格信息');
            bool = false;
            return false;
          }
        });
        if (!bool) {
          return false;
        }
        this.$refs.forms.validate((valid, err) => {
          if (valid) {
            return true;
          } else {
            this.activeName = "second";
            this.$messages.error('请补全用户规则信息');
            bool = false;
            return false;
          }
        });
        if (!bool) {
          return false;
        }
        this.$refs.for_mer_infoForm.validate((valid, err) => {
          if (valid) {
            return true;
          } else {
            this.activeName = "third";
            this.$messages.error('请补全商户规则信息');
            bool = false;
            return false;
          }
        });
        if (!bool) {
          return false;
        }

        if(this.addtype == 2){
          //赋值
          this.forms.related_user_tag =
            this.related_user_tag.toString();
          this.forms.related_user_group =
            this.related_user_group.toString();
          this.forms.area_id = JSON.stringify(this.cascaderRegList);
          this.forms.invitation_relationship =
            this.invitation_relationship.toString();
          this.for_mer_infoForm.selection_limit =
            this.for_mer_infoForm.selection_limit.toString();
          if (this.for_mer_infoForm.change_price_limit.type !== 3) {
            this.for_mer_infoForm.change_price_limit.values = "0";
          }
          if (this.for_mer_infoForm.change_price_limit.type == 3) {
            this.for_mer_infoForm.change_price_limit.values = {
              increment: this.increment,
              decrement: this.decrement,
            };
          }
          this.form.id = this.goodsdetail.goods_product[0].id;
          this.addLoding = true;
          this.addPutLoading = true;
          var obj = {
            status: this.status,
            id: this.goodsdetail.supplier_id,
            sku: [{
              ...this.form,
              suggestion_price: {
                retail_price: this.form.retail_price,
                integral_price: '',
                integral_scale: '',
                voucher_price: '',
                voucher_scale: ''
              },
            }],
            for_user_info: {
              ...this.forms,
            },
            for_mer_info: {
              ...this.for_mer_infoForm,
            },
          };
          //添加选品
          addselection(obj)
            .then((res) => {
              if (res.code !== 200) {
                this.addLoding = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.addLoding = false;
              this.drawer = false;
              this.addPutLoading = false;
            })
            .catch((err) => {
              this.addLoding = false;
              this.addPutLoading = false;
              this.$messages.error(err.msg);
            });
        }else{
          //赋值
          this.forms.related_user_tag =
            this.related_user_tag.toString();
          this.forms.related_user_group =
            this.related_user_group.toString();
          this.forms.area_id = JSON.stringify(this.cascaderRegList);
          this.forms.invitation_relationship =
            this.invitation_relationship.toString();
          this.for_mer_infoForm.selection_limit =
            this.for_mer_infoForm.selection_limit.toString();
          if (this.for_mer_infoForm.change_price_limit.type !== 3) {
            this.for_mer_infoForm.change_price_limit.values = "0";
          }
          if (this.for_mer_infoForm.change_price_limit.type == 3) {
            this.for_mer_infoForm.change_price_limit.values = {
              increment: this.increment,
              decrement: this.decrement,
            };
          }
          this.addLoding = true;
          this.addPutLoading = true
          var obj = {
            status: this.status,
            id: this.supplier_id,
            sku: {
              ...this.form,
              suggestion_price: {
                retail_price: this.form.retail_price,
                integral_price: '',
                integral_scale: '',
                voucher_price: '',
                voucher_scale: ''
              },
            },
            for_user_info: {
              ...this.forms,
            },
            for_mer_info: {
              ...this.for_mer_infoForm,
            },
          };
          //添加选品
          editselection(obj)
            .then((res) => {
              if (res.code !== 200) {
                this.addLoding = false;
                return this.$messages.error(res.msg);
              }
              this.$messages.success(res.msg);
              this.addLoding = false;
              this.addPutLoading = false
              this.drawer = false;
            })
            .catch((err) => {
              this.addPutLoading = false
              this.addLoding = false;
              this.$messages.error(err.msg);
            });
        }

      },
    },
  };
</script>
<style lang="scss">
  .drawer-layout {

    /*1.显示滚动条：当内容超出容器的时候，可以拖动：*/
    // .el-drawer__body {
    //     overflow: auto;
    // }

    /*2.隐藏滚动条，太丑了*/
    .el-drawer__container ::-webkit-scrollbar {
      display: none;
    }

    .el-drawer__header {
      background-color: #409eff;
      color: #ffffff;
      padding: 10px 20px;
      margin-bottom: 10px;
    }
  }

  .textareabox {
    .form-box-item {
      width: 100%;
      display: flex;

      .el-form-item__content {
        width: 100%;
        flex: 1;
      }
    }

  }
</style>
<style lang="scss" scoped>
  .layout {
    padding: 10px 20px;

    .fontWeight600 {
      font-weight: 600;
    }

    .product-info {
      border-radius: 5px;
      border: 1px solid #EFEFEF;
      display: flex;
      padding: 10px 20px;
      margin-bottom: 10px;
      font-size: 14px;
      color: #4E5969;

      .info-lt {
        width: 60%;
        display: flex;

        .info-image {
          margin-right: 25px;
        }

        .info-name {
          width: 300px;
          color: #101010;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .info-cost {
          color: #BD3124;
        }
      }

      .info-rt {
        width: 50%;

        .info-rule {
          color: #333333;
        }

        .info-code {
          color: #4E5969;
        }
      }

      .info-text {
        height: 35px;
        line-height: 35px;
      }
    }

    .tip {
      font-size: 12px;
      color: #4c4c4c;
    }


  }



  .blockquote-box {
    border-left: 4px solid #409eff;
    padding-left: 16px;
    margin: 16px 0;
    height: 40px;
    line-height: 40px;
    background: #fafafa;
    font-size: 16px;
  }

  .button-box {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 60%;
    background: #ffffff;
    padding: 20px;

    .next-button {
      height: 30px;
    }
  }

  .mgbottom80 {
    margin-bottom: 70px;
  }
</style>
